<template>
  <div>
    <div class="top">
      <div>订单管理</div>
    </div>
    <div class="info">
      <!-- 日期币种 -->
      <div @click="thedata" class="time">
        订单日期/币种
        <span>
          <i style="float:right" class="el-icon-search"></i>
        </span>
      </div>
      <div class="infoitem">
        <p
          @click="getData(item.id,item.status)"
          v-for="(item,index) in allTitle"
          :key="index"
          :class="[titleColor == index?'activeColor':'']"
        >{{item.name}}</p>
      </div>
      <div>
        <div class="aaaa" style="margin-top:10px">
          <div style="width:20%">编号</div>
          <div style="width:10%">项目名称</div>
          <div style="width:10%">单价({{typedate}})</div>
          <div style="width:10%">数量</div>
          <div style="width:10%">价格({{typedate}})</div>
          <div style="width:15%">时间</div>
          <div style="width:15%" v-show="titleColor == 0?true:false">操作</div>
        </div>
           <!-- 没有数据时展示 -->
        <div v-show="allData.length ==0">
          <div class="listing_data">
            <ul>
              <li>
                <img src="../../assets/img/wujilu.png" alt />
              </li>
              <li>
                <div style="font-size: 13px;color:#b9c1c9;text-align: center;margin-top:20px">暂无记录</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="aaaa" v-for="item in allData" :key="item.index" style="margin-top:10px">
          <div style="width:20%">{{item.orderId}}</div>
          <div style="width:10%">{{item.pName}}</div>
          <div style="width:10%">{{item.unitPrice}}</div>
          <div style="width:10%">{{item.buyNumber}}</div>
          <div style="width:10%">{{item.investmentAmount}}</div>
          <div style="width:15%">{{item.createTime}}</div>
          <div style="width:15%" v-show="titleColor == 0?true:false">
            <button @click="blow(item.orderId)">确定</button>
            <button @click="disappear(item.orderId)">取消</button>
          </div>
        </div>
        <p>
          <el-pagination
            class="float_rt"
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :total="total"
            :current-page.sync="pages"
            :page-size="1"
          ></el-pagination>
        </p>
      </div>
      <!-- 弹框 -->
      <div v-if="bounced" class="modal">
        <!-- 日期 -->
        <div>
          日期
          <el-date-picker v-model="orderTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </div>
        <div>
          币种
          <el-select @change="onSelect" v-model="bType" placeholder>
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.virtual_wallet_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <!-- 清空筛选项 -->
        <div class="empty">
          <div @click="empty">清空筛选项</div> 
          <div class="cancel">取消</div>
          <div @click="countryitm" class="determine">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
export default {
  data() {
    return {
      typedate: "USDT",
      options: [],
      titleColor: "0",
      bounced: false,
      total: 1,
      allData: "",
      pages: 1,
      orderTime: "",
      bType: "",
      allTitle: [
        {
          id: 0,
          name: "待确认",
          status: "0"
        },
        {
          id: 1,
          name: "已完成",
          status: "1"
        },
        {
          id: 2,
          name: "已取消",
          status: "2"
        },
        {
          id: 3,
          name: "全部",
          status: ""
        }
      ]
    };
  },
  created() {
    this.initData(this.pages, this.orderTime, this.bType, "0");
    this.kindof();
  },
  methods: {
    // 分页
    handleCurrentChange: function(pages) {
      let that = this;
      console.log(pages);
      that.pages = pages;
      this.initData(that.pages);
      // this.countryitm(that.pages);
    },
    // 币种
    onSelect(id) {
      console.log(id, 222);
      for (var i = 0; i < this.options.length; i++) {
        if (this.options[i].id == id) {
          this.typedate = this.options[i].virtual_wallet_name;
        }
      }
      console.log(this.typedate, 8585);
    },
    getData(id, status) {
      this.titleColor = id;
      this.initData(this.pages, this.orderTime, this.bType, status);
    },
    initData(pages, time, order, status) {
      let that = this;
      that.$axios
        .get(window.addressUrl.orderManage, {
          params: {
            token: sessionStorage.getItem("setToken"),
            page: pages,
            rows: 2,
            orderTime: time,
            virtualWalletId: order,
            type: status
          }
        })
        .then(res => {
          console.log(res.data.data, 9999);
          if (res.data.code == 200) {
            that.allData = res.data.data;
            that.total = Math.ceil(res.data.count / 2);
          }
        });
    },
    // 确定
    countryitm(index, id, orderTime) {
      var that = this
      that.bounced = false
      that.initData(that.pages, that.orderTime, that.bType, status);
    },
    // 清空
    empty(){
       var that = this
       that.orderTime = that.bType = ''
    },
    // 币种
    kindof() {
      let that = this;
      that.$axios.get(window.addressUrl.moreCurrency, {}).then(res => {
        console.log(res.data);
        if (res.data.code == 200) {
          that.options = res.data.data;
          console.log(that.options, 7654444);
        }
      });
    },
    // 点击确认
    blow(num) {
      let that = this;
      that.$axios
        .post(
          window.addressUrl.confirmOrder,
          qs.stringify({
            orderId: num
          })
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            that.$message(res.data.msg);
          }
        });
    },
    // 取消
    disappear(num) {
      let that = this;
      that.$axios
        .post(
          window.addressUrl.cancelOrder,
          qs.stringify({
            orderId: num
          })
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            that.$message(res.data.msg);
          }
        });
    },
    // 弹框
    thedata() {
      this.bounced = !this.bounced;
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-icon-search:before {
    content: "\E778";
    line-height: 25px;
    margin-left: -30px;
}
.activeColor {
  color: #478ee5;
  border: 2px solid #478ee5;
  border-top-style: none;
  border-left-style: none;
  border-right-style: none;
  padding-bottom: 10px;
}
.aaaa {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  button {
    background: rgba(56, 83, 118, 1);
    border-radius: 2px;
    border: 1px solid #385376;
    padding: 0 5px;
    line-height: 20px;
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    margin-left: 15px;
  }
}
.top {
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 1);
  box-shadow: -1px 3px 6px 0px rgba(71, 142, 229, 0.08);
  div {
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(56, 83, 118, 1);
    line-height: 50px;
    margin-left: 9px;
  }
}
.info {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  margin-top: 10px;
  padding-bottom: 100px;
  .time {
    width: 130px;
    height: 25px;
    background: #ffffff;
    border: 1px solid #385376;
    border-radius: 10px;
    float: right;
    clear: both;
    position: relative;
    z-index: 99;
    top: 6px;
    font-size: 9px;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: #999999;
    padding-left: 10px;
    line-height: 25px;
    span img {
      width: 9px;
      height: 9px;
      margin-left: 10px;
      margin-top: 2px;
    }
  }
  .float_rt {
    float: right;
    margin-top: 30px;
  }
  .infoitem {
    display: flex;
    p {
      margin-left: 20px;
      font-size: 14px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
  }
  .modal {
    width: 200px;
    height: 170px;
    margin: 0 auto;
    background: red;
    position: absolute;
    // z-index: 99999999;
    top: 100px;
    right: 10px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.1);
    > div {
      font-size: 10px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      margin-left: 6px;
      margin-top: 10px;
    }

    .empty {
      font-size: 10px;
      font-family: PingFang-SC-Regular;
      font-weight: 400;
      color: rgba(71, 142, 229, 1);
      margin-top: 25px;
      display: flex;
      .determine {
        background: rgba(56, 83, 118, 1);
        border-radius: 2px;
        padding: 0 5px;
        padding-bottom: 2px;
        margin-left: 5px;
        font-size: 8px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
      .cancel {
        font-size: 10px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-left: 60px;
      }
    }
  }
}

/deep/.el-select {
  display: inline-block;
  position: relative;
  width: 124px;
  height: 24px;
  margin-left: 30px;
}
/deep/.el-input--suffix .el-input__inner {
  padding-right: 22px;
  height: 24px;
}
/deep/.el-input__icon {
  line-height: 0px;
}
/deep/.el-popper {
  margin-bottom: 12px;
  z-index: 99999999;
}
/deep/.el-select-dropdown {
  position: absolute;
  z-index: 999999999;
}
/deep/.el-icon-time:before {
  content: "";
}
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 124px;
  margin-left: 29px;
}
/deep/.el-input--prefix .el-input__inner {
  padding-left: 15px;
}
/deep/.el-input--prefix .el-input__inner {
  padding-left: 4px;
  font-size: 10px;
}
.listing_data ul li img {
  margin: 60px auto;
  width: 210px;
  height: 140px;
  display: flex;
}
</style>

